<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>CoCoDep - login and register</title>

<link rel="stylesheet" href="/static/css/reset.min.css">
<link rel="stylesheet" href="/static/css/lor.css">
    <link href="/static/images/logo.png" rel="shortcut icon"/>
<script type='text/javascript'  src="/static/js/jquery-1.7.2.js"></script>

</head>
<body>

<section class="user">
  <div class="user_options-container">
    <div class="user_options-text">
      <div class="user_options-unregistered">
        <h2 class="user_unregistered-title">Having No account？</h2>
        <button class="user_unregistered-signup" id="signup-button">Register</button>
      </div>

      <div class="user_options-registered">
        <h2 class="user_registered-title">Have an account?</h2>
        <button class="user_registered-login" id="login-button">Login</button>
      </div>
    </div>
    
    <div class="user_options-forms" id="user_options-forms">
      <div class="user_forms-login">
        <h2 class="forms_title">Log In</h2>
        <form class="forms_form" id="login_box">
          <fieldset class="forms_fieldset">
              <div id="form_area">
            <div class="forms_field">
              <input type="email" placeholder="Email" class="forms_field-input" autofocus id="login_email"/>
            </div>
            <div class="forms_field">
              <input type="password" placeholder="Password" class="forms_field-input" id="login_pwd"/>
                <div style="padding-top: 5px; display: none" id="password_error"><span style="color:red;">Your email or password error</span></div>
                <div style="padding-top: 5px; display: none" id="ft_error"><span style="color:red;">Your email error</span></div>
            </div>
                  </div>
            <div class="forms_field" id="captcha_area" style="display: none">
                <div id="tag" style="display: none;font-size: 14px;margin-bottom: 15px"><span>We have sent a captcha to your email. Please enter it.</span></div>
                <input type="text" placeholder="Captcha" class="forms_field-input" style="width: 40%;" maxlength="6" id="captcha"/>
                <div style="padding-top: 5px; display: none" id="captcha_error"><span style="color:red;">Your captcha error</span></div>
            </div>
          </fieldset>
          <div class="forms_buttons">
            <button type="button" class="forms_buttons-forgot"><a style="text-decoration: None;color: #adb5bd" href="/forgetpwd/">Forget password?</a></button>
            <input type="button" value="Login" class="forms_buttons-action" id="login">
            <input type="button" value="Login" class="forms_buttons-action" id="login2" style="display: none">
              <input type="button" value="Resend" class="forms_buttons-action"  id="resend_l" style="display: none;width: 200px">
          </div>



        </form>
      </div>
      <div class="user_forms-signup" id="box_r">
        <h2 class="forms_title">Register</h2>
        <form class="forms_form" id="form_r">
          <fieldset class="forms_fieldset" id="r_box">
            <div class="forms_field">
              <input type="text" placeholder="Real Name" class="forms_field-input" id="name" name="name"/>
                <div style="padding-top: 5px; display: none" id="name_error"><span style="color:red;">Sorry, please fill out the names of</span></div>
            </div>
            <div class="forms_field">
              <input type="email" placeholder="Email" class="forms_field-input" id="register_email"/>
                <div style="padding-top: 5px; display: none" id="email_error"><span style="color:red;">Email addresses are not correct format</span></div>
                <div style="padding-top: 5px;"><span style="color:red; display: none" id="email_msg"></span></div>
            </div>
            <div class="forms_field">
              <input type="password" placeholder="Password" class="forms_field-input" id="pwd1"/>
                <div style="padding-top: 5px; display: none" id="pwd_error"><span style="color:red;">8-20 characters, can not contain spaces or special characters</span></div>
            </div>
            <div class="forms_field">
              <input type="password" placeholder="Confirm Password" class="forms_field-input" id="pwd2"/>
                <div style="padding-top: 5px; display: none" id="pwd2_error"><span style="color:red;" id="msg">Enter the password twice to the same</span></div>
                <div style="padding-top: 5px; display: none" id="role_error"><span style="color:red;">Please select your identity</span></div>
            </div>
          </fieldset>
            <div id="tag_r" style="display:none;font-size: 14px;margin-bottom: 15px"><span>We have sent a captcha to your email. Please enter it.</span></div>
          <div class="forms_buttons">

              <div class="forms_field" style="width: 40%;margin-right: 130px">

              <input type="text" placeholder="Captcha" class="forms_field-input" id="code" style="display: none">
                  <div style="padding-top: 5px; display: none" id="code_error"><span style="color:red;">Your captcha error</span></div>
              </div>
              <div  style="margin-right: 100px;display: flex" id="role_box">
                  <input type="radio" name="role" value="student" class="forms_check"><p style="padding-top: 3px;">Student&nbsp;&nbsp;&nbsp;&nbsp;</p><input type="radio" name="role" value="teacher"><p style="padding-top: 3px;">Teacher</p>
              </div>


            <input type="button" value="Register" class="forms_buttons-action"  id="register" >
            <input type="button" value="Register" class="forms_buttons-action" style="display: none;"  id="reg">
          </div>
            <div>

                <input type="button" value="Resend" class="forms_buttons-action"  id="resend" style="display: none;margin-top: 30px;width: 200px">
            </div>

        </form>
      </div>
    </div>
  </div>
</section>
<script src="/static/js/lor.js" type='text/javascript'></script>

 
</body>
</html>